<template>
	<span
		class="sub-count"
		:class="{
			exceed: value > max,
			error: type === 'error',
			warning: type === 'warning',
			success: type === 'success',
		}"
		:title="title">
		<span class="value">{{ innerValue }}</span>
		<span class="sub">+</span>
	</span>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue';

const props = defineProps({
	value: {
		type: Number,
		default: 0,
	},
	type: {
		type: String as PropType<'error' | 'warning' | 'success'>,
		default: 'success',
	},
	max: {
		type: Number,
		default: 99,
	},
	title: String,
});

const innerValue = computed(() => {
	return props.value > props.max ? props.max : props.value;
});
</script>

<style scoped lang="scss">
.sub-count {
	display: inline-flex;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	line-height: 18px;
	align-items: center;
	justify-content: center;
	user-select: none;
	position: relative;
	margin-left: 6px;
	.value {
		font-size: 12px;
		transform: translateX(5%) scale(0.85);
	}
	.sub {
		display: none;
	}
	&.error {
		background-color: var(--theme-danger-color);
	}
	&.warning {
		background-color: var(--theme-warning-color);
	}
	&.success {
		background-color: var(--theme-success-color);
	}
	&.exceed .sub {
		display: block;
		font-size: 12px;
		position: absolute;
		right: 0;
		top: 0;
		transform: translate(1px, -8px);
		font-weight: 500;
	}
}
</style>
